import React from 'react';
import PropTypes from 'prop-types';
import { PanelGroup, Panel, ListGroup } from 'react-bootstrap';

export default class AccordionPanels extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: this.props.defaultKey,
    };
  }

  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    const { children, id, panels } = this.props;

    /**
     * 定制panel
     * @method setPanel
     * created by wjxu on 2018-05-24T14:21:05+0800
     * @param  {Array} panels panel主体数据数组
     */
    const panelList = panels.map((e, i) => (
      <Panel eventKey={i} key={e.title}>
        <Panel.Heading >
          <Panel.Title toggle>{e.title}</Panel.Title>
        </Panel.Heading>
        {e.body && <Panel.Body collapsible>{e.body}</Panel.Body>}
        {e.list && <Panel.Collapse><ListGroup>{e.list}</ListGroup></Panel.Collapse>}
      </Panel>
    ));

    return (
      <PanelGroup
        accordion
        id={id}
        activeKey={this.state.activeKey}
        onSelect={this.handleSelect}
      >
        {children}{panelList}
      </PanelGroup>
    );
  }
}

AccordionPanels.defaultProps = {
  defaultKey: 0,
  id: 'accordion-example',
  panels: [],
};

AccordionPanels.propTypes = {
  defaultKey: PropTypes.number,
  id: PropTypes.string,
  panels: PropTypes.array,
};

